		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			a {
				text-decoration: none;
			}
			
			ul {
				list-style: none;
			}
			
			/* 头部栏，通用 */
			#header {
				height: 140px;
				margin: auto;
				background: rgba(255, 255, 255, 0.8);
				position: fixed;
				width: 100%;
				z-index: 1;
			}
			
			#header div {
				height: 88px;
				width: 1300px;
				margin: auto;
			}
			
			#header span {
				display: block;
				height: 1px;
				background-color: #e5e5e5;
			}
			
			#header .u {
				width: 1300px;
				margin: auto;
				position: relative;
			}
			
			#header .u>li {
				float: left;
				padding: 0 13px;
				line-height: 50px;
			}
			
			#header .u>li>a {
				display: block;
				color: #808080;
				font-size: 13px;
				font-weight: bold;
				text-decoration: none;
				height: 50px;
			}
			
			#header .u>li a:hover {
				color: #444444;
			}
			
			#header .u>li:hover>.u1 {
				display: block;
			}
			
			.u1 {
				position: absolute;
				border-top: 2px solid #444444;
				display: none;
				background-color: #ffffff;
			}
			
			.u1 li {
				height: 40px;
				width: 200px;
			}
			
			.u1 li:hover {
				background-color: gainsboro;
				transition: 0.5s;
			}
			.u1 li a {
				display: block;
				font-size: 12px;
				color: #808080;
				height: 40px;
				line-height: 40px;
			}
			
			#search {
				line-height: 50px;
				position: absolute;
				right: 0;
				width: 20px;
				height: 50px;
				background-image: url(./img/01-放大镜.png);
				background-size: 14px;
				background-repeat: no-repeat;
				background-position: 2px 20px;
			}
			
			.u #sou {
				width: 280px;
				height: 80px;
				background-color: #FFFFFF;
				position: absolute;
				top: 50px;
				right: -6px;
				border: 1px solid #5F9EA0;
				box-shadow: 0 0 2px #5F9EA0;
				display: none;
			}
			.u #sou::after {
				content: "";
				display: block;
				width: 16px;
				height: 16px;
				transform: rotate(45deg);
				background-color: #FFFFFF;
				position: relative;
				top: -71px;
				left: 245px;
				border-left: 1px solid #5F9EA0;
				border-top: 1px solid #5F9EA0;
			}
			
			#sou input {
				width: 200px;
				height: 40px;
				margin-top: 20px;
				outline: none;
				margin-left: 20px;
				border: #e1e1e1 1px solid;
				background-color: #f8f8f8;
				color: gray;
			}
			
			.u #sou a {
				display: inline-block;
				width: 42px;
				height: 42px;
				background-color: darkred;
				margin-left: -5px;
				position: relative;
				top: 13px;
			}
			
			.u #sou a:hover {
				opacity: 0.5;
			}
			
			.u #sou a img {
				width: 18px;
				height: 18px;
				margin: 10px 12px;
			}
			
		</style>
	</head>
		<!-- 头部栏，通用 -->
		<div id="header">
			<div id="logo">
				<img src="img/taylor-header-logo-long.svg">
			</div>
			<span></span>
			<ul class="u">
				<li><a href="index.html">主页</a></li>
				<li>
					<a href="MyAccount.html">我的账户</a>
					<ul class="u1">
						<li><a href="shoppingTrolley.html">购物车</a></li>
						<li><a href="">结算</a></li>
						<li><a href="">收藏夹</a></li>
					</ul>
				</li>
				<li><a href="shop.html">吉他商店</a></li>
				<li>
					<a href="description.html">Taylor泰勒吉他简介</a>
					<ul class="u1">
						<li><a href="">Taylor泰勒吉他目录</a></li>
						<li><a href="">Taylor泰勒吉他图册</a></li>
						<li><a href="">Taylor吉他防伪查询</a></li>
					</ul>
				</li>
				<li><a href="agency.html">经销商</a></li>
				<a href="#" id="search"></a>
				<div id="sou">
					<input type="text" name="" id="" placeholder="搜索" />
					<a href=""><img src="img/03-放大镜%20.png"></a>
				</div>
			</ul>
			<p></p>
		</div>
		<div id="" style="height: 140px;">
		</div>
		
<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script>
	//头部栏，通用
	//滚动鼠标，改变头部栏的宽高
	$(window).scroll(function() {
		$("#logo,#logo img,#header").css({
			transition: "0.5"
		})
		if ($(this).scrollTop() > 0) {
			$("#logo,#logo img").css({
				height: "44px"
			});
			$("#header").css({
				height: "96px",
				borderBottom: "1px #e5e5e5 solid"
			})
		} else {
			$("#logo").css({
				height: "88px"
			});
			$("#logo img").css({
				height: "82px"
			});
			$("#header").css({
				height: "140px"
			})
			$("#header").css({
				height: "96px",
				borderBottom: "1px #ffffff solid"
			})
		}
	})
	//点击放大镜弹出搜索框
	let a = 0;
	$("#search").click(function(evt) {
		if (a == 0) {
			a++;
			let e = evt || event;
			$("#sou").css({
				display: "block"
			})
			e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
		} else if (a == 1) {
			a--;
			$("#sou").css({
				display: "none"
			})
		}
	})
	$(document).click(function() {
		a = 0;
		$("#sou").css({
			display: "none"
		});
	})
	$("#sou").click(function(evt) {
		let e = evt || event;
		$(this).css({
			display: "block"
		});
		e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
	})
</script>
